<template>
  <div class="login-container">
    <!-- 验证码弹框 -->
    <el-dialog
      width="340px"
      append-to-body
      :visible.sync="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <Captcha
        ref="dialogopen"
        :l="42"
        :r="10"
        :w="catcha.w"
        :h="catcha.h"
        :blocky="catcha.blocky"
        :imgurl="catcha.imgurl"
        :miniimgurl="catcha.miniimgurl"
        :slider-text="catcha.text"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
      />
    </el-dialog>

    <div @click="haha()">我是测试验证码的</div>

    <div>
      X: {{ x }}
      <br />
      滑动坐标:{{ lefty }}
    </div>
  </div>
</template> 
   
<script>
import Captcha from "@/components/captha/index.vue";
import { getcaptcha ,getimg} from "@/request/api.js";

export default {
  name: "Login",
  components: { Captcha },
  data() {
    return {
      dialogVisible: false, // 验证码弹框
      x: "点击验证码生成坐标X",
      lefty: "您滑动的验证码坐标轴为",
      catcha: {
        blocky: 0,
        imgurl: "",
        miniimgurl: "",
        text: "向右滑动完成拼图",
        h: 150,
        w: 300,
        sh: 64,
        sw: 64,
        modifyImg: "",
      }, // 图片验证码传值
    };
  },
  created() {},
  mounted() {},
  methods: {
    haha() {
      this.dialogVisible = true;
      this.getImageVerifyCode();
      //this.onTest();
    },
    // 获取图形验证码
    getImageVerifyCode() {
      getcaptcha().then((res) => {
        if (res) {
          var imgobj = res.api;
          this.x = imgobj.x;
          this.catcha.blocky = imgobj.y;
          this.catcha.imgurl = imgobj.bg;
          this.catcha.miniimgurl = imgobj.gap_diagram;
          this.$nextTick(() => {
            if (this.$refs.dialogopen) {
              this.$refs.dialogopen.reset(imgobj.puzzleYAxis);
            }
          });
        }
      });
    },
    onFail() {
      console.log("fail");
    },

    onSuccess(left) {
      console.log(left);
      //   this.loginForm.distance = left;
      // console.log('succss', left)
      // 验证是否成功checkKaptchaImg是后台验证接口方法

      var i = this.x;

      this.lefty = left;
      if (left == i) {
        console.log(this.$refs);
        this.$refs.dialogopen.handleSuccess();
        setTimeout(() => {
          this.dialogVisible = false;
          this.imgurl = "";
          this.miniimgurl = "";
          //   this.loginForm.distance = left;
        }, 1000);
      } else {
        console.log(this.$refs);
        this.$refs.dialogopen.handleFail();
        setTimeout(() => {
          this.getImageVerifyCode();
        }, 500);
      }
    },
    // 刷新
    onRefresh() {
      this.imgurl = "";
      this.miniimgurl = "";
      this.getImageVerifyCode();
    }, 
  },
};
</script>